<template>
    <div class="detail-container" v-loading="loading">
                <el-card class="box-card" style="padding:20px;width:840px;height:1188px;margin:0 auto;overflow: auto">
                    <div id="print-div2" style="font-family: 'SimSun'">
                        <div style="page-break-after: always;" v-for="c in orderInfo">
                            <div style="margin-bottom:40px;page-break-inside:avoid;" v-for="cc in c.fromCompanyList">
                                <div class="title" style="font-size:18px;font-weight: bold;text-align: center;line-height: 22px;padding-top:20px;">收货确认单</div>
                                <div class="paper-top" style="font-size: 14px;margin-top: 40px;margin-bottom: 20px;position: relative;">
                                    <div style="width:100%;overflow: hidden">
                                        <div style="box-sizing: border-box;overflow: hidden;line-height: 22px;width:60%;float:left;">
                                            <div style="width:85px;display: inline-block"><div class="label">客户名称：</div></div>
                                            <div style="width:calc(100% - 100px);display: inline-block">
                                                <div>{{c.customerName}}</div>
                                            </div>
                                        </div>
                                        <div style="box-sizing: border-box;overflow: hidden;line-height: 22px;width:40%;float:left;text-align: right">
                                            <div style="box-sizing: border-box;overflow: hidden">
                                                <div style="width:80px;display:inline-block;padding-left:15px;"><div class="label">月份：</div></div>
                                                <div style="width:80px;display:inline-block;">
                                                    <div>{{cc.shipMonth}}</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div style="clear: both"></div>
                                <div class="good-table">
                                    <table cellspacing="0" cellpadding="0" border="0" width="100%" style="border-left:2px solid #000;border-bottom:2px solid #000">
                                        <tr>
                                            <th align="center" style="white-space:nowrap;font-weight: normal;font-size:14px; border-top:2px solid #000;padding:5px;line-height: 20px;border-right:1px solid #000;">发货日期</th>
                                            <th align="center" style=" white-space:nowrap;font-weight: normal;font-size:14px; border-top:2px solid #000;padding:5px 10px;line-height: 20px;border-right:1px solid #000;">合同号</th>
                                            <th align="center" style="white-space:nowrap; font-weight: normal;font-size:14px; border-top:2px solid #000;padding:5px 10px;line-height: 20px;border-right:1px solid #000;">发货单号</th>
                                            <th align="center" style="white-space:nowrap; font-weight: normal;font-size:14px; border-top:2px solid #000;padding:5px 10px;line-height: 20px;border-right:1px solid #000;">商品名称</th>
                                            <th align="center" style="white-space:nowrap; font-weight: normal;font-size:14px; border-top:2px solid #000;padding:5px 10px;line-height: 20px;border-right:1px solid #000;">规格型号</th>
                                            <th align="center" style=" white-space:nowrap;font-weight: normal;font-size:14px; border-top:2px solid #000;padding:5px 10px;line-height: 20px;border-right:1px solid #000;">单位</th>
                                            <th align="center" style=" white-space:nowrap;font-weight: normal;font-size:14px; border-top:2px solid #000;padding:5px;line-height: 20px;border-right:1px solid #000;">合同数量</th>
                                            <th align="center" style=" white-space:nowrap;font-weight: normal;font-size:14px; border-top:2px solid #000;padding:5px;line-height: 20px;border-right:1px solid #000;">发货数量</th>
                                            <th align="center" style="white-space:nowrap; font-weight: normal;font-size:14px; border-top:2px solid #000;padding:5px 10px;line-height: 20px;border-right:2px solid #000;">备注</th>
                                        </tr>
                                        <tr v-for="ccc in cc.deliverList">
                                            <td align="center" style="white-space:nowrap;font-weight: normal;border-right: 1px solid #000;border-top: 1px solid #000;padding: 5px;line-height: 20px;"><div class="td-con" style="white-space:nowrap;">{{ccc.shipTime}}</div></td>
                                            <td align="center" style="white-space:nowrap;font-weight: normal;border-right: 1px solid #000;border-top: 1px solid #000;padding: 5px 10px;line-height: 20px;"><div class="td-con" style="white-space:nowrap;">{{ccc.orderSn}}</div></td>
                                            <td align="center" style="white-space:nowrap;font-weight: normal;border-right: 1px solid #000;border-top: 1px solid #000;padding: 5px 10px;line-height: 20px;width:60px"><div class="td-con" style="white-space:nowrap;">{{ccc.deliverSn}}</div></td>
                                            <td align="center" style="font-weight: normal;border-right: 1px solid #000;border-top: 1px solid #000;padding: 5px 10px;line-height: 20px;"><div  class="td-con" style="white-space:nowrap;">{{ccc.goodsName}}</div></td>
                                            <td align="center" style="font-weight: normal;border-right: 1px solid #000;border-top: 1px solid #000;padding: 5px 10px;line-height: 20px;"><div class="td-con">{{ccc.goodsSn}}</div></td>
                                            <td align="center" style="white-space:nowrap;font-weight: normal;border-right: 1px solid #000;border-top: 1px solid #000;padding: 5px 10px;line-height: 20px;"><div style="white-space:nowrap;"  class="td-con">{{ccc.goodsUnit}}</div></td>
                                            <td align="center" style="white-space:nowrap;font-weight: normal;border-right: 1px solid #000;border-top: 1px solid #000;padding: 5px;line-height: 20px;"><div style="white-space:nowrap;"  class="td-con">{{ccc.goodsNum}}</div></td>
                                            <td align="center" style="white-space:nowrap;font-weight: normal;border-right: 1px solid #000;border-top: 1px solid #000;padding: 5px;line-height: 20px;"><div style="white-space:nowrap;"  class="td-con">{{ccc.shipNum}}</div></td>
                                            <td align="center"  style="font-weight: normal;border-top: 1px solid #000;padding: 5px 10px;line-height: 20px;border-right: 2px solid #000"><div class="td-con" style="max-width:150px">{{ccc.remark}}</div></td>
                                        </tr>
                                        <tr>
                                            <td  style="font-weight: normal;border-right: 1px solid #000;border-top: 1px solid #000;padding: 5px 10px;line-height: 20px;"><div style="white-space:nowrap;letter-spacing: 11px;padding-left:15px">合计</div></td>
                                            <td align="center" style="font-weight: normal;border-top: 1px solid #000;padding: 5px 10px;line-height: 20px;border-right:0"></td>
                                            <td align="center" style="font-weight: normal;border-top: 1px solid #000;padding: 5px 10px;line-height: 20px;border-right:0"></td>
                                            <td align="center" style="font-weight: normal;border-top: 1px solid #000;padding: 5px 10px;line-height: 20px;border-right:0"></td>
                                            <td align="center" style="font-weight: normal;border-top: 1px solid #000;padding: 5px 10px;line-height: 20px;border-right:0"></td>
                                            <td align="center" style="font-weight: normal;border-top: 1px solid #000;padding: 5px 10px;line-height: 20px;border-right:0"></td>
                                            <td align="center" style="font-weight: normal;border-top: 1px solid #000;padding: 5px;line-height: 20px;border-right:0"></td>
                                            <td align="center" style="font-weight: normal;border-top: 1px solid #000;padding: 5px;line-height: 20px;border-right:0">{{cc.shipNumSum}}</td>
                                            <td align="center" style="font-weight: normal;border-top: 1px solid #000;padding: 5px 10px;line-height: 20px;border-right: 2px solid #000"></td>
                                        </tr>
                                    </table>
                                </div>
                                <div class="paper-bottom" style="position: relative;margin-top:20px;line-height: 20px;font-size:14px;">
                                    <div>收货单位签字或盖章</div>
                                    <div style="margin-top:40px;">为了提高我司更好的服务，请贵司对以上信息进行核对，如无误，请盖章回传。</div>
                                    <div>贺送<span style="padding-left:20px;">商褀！</span></div>
                                    <div style="text-align: right;margin-top:20px;">送货单位：{{cc.fromCompany}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="font-size:12px;text-align: center;padding:20px;color:#888;" v-if="orderInfo.length == 0">- 暂无可打印内容 -</div>
                </el-card>
                <div style="margin-top:40px;text-align: center">
                    <el-button type="primary" style="width:150px;" @click="printdiv" :disabled="orderInfo.length == 0">打印</el-button>
                    <el-button  style="width:150px;" @click="goBlack">返回</el-button>
                </div>



    </div>
</template>
<script>
    import { mapGetters } from 'vuex'
    import store from '@/store'
    import {customerDeliverList} from '@/api/partner'
    import "@/utils/jQuery.print"
    export default {
        name: "customerDetail",
        data(){
            return{
                roles:store.getters.roles ? store.getters.roles : [],
                loading:false,
                shipMonth:this.$route.query.shipMonth,
                customerId:this.$route.query.customerId,
                customerIds:this.$route.query.customerIds,
                type:this.$route.query.type,
                form:this.$route.query.form,
                orderInfo:[],
                btnLoading:false,
            }
        },
        computed: {
            ...mapGetters([
                'name',
                'mobile',
                'userId'
            ]),
        },
        created() {
            this.getPageInfo();
        },
        filters: {


        },
        methods:{
            goBlack(){
                this.$router.go(-1)
            },
            //打印
            printdiv(){
               //  this.btnLoading = true;
               // downPdf({orderId:this.orderId}).then((res)=>{
               //      this.btnLoading = false;
               //     this.$message({
               //         type: 'success',
               //         message: '操作成功!'
               //     });
               //      window.open(res)
               //
               // }).catch(()=>{
               //     this.btnLoading = false;
               // })
                $("#print-div2").print({
                    globalStyles:true,//是否包含父文档的样式，默认为true
                    mediaPrint:true,//是否包含media='print'的链接标签。会被globalStyles选项覆盖，默认为false
                    stylesheet:null,//外部样式表的URL地址，默认为null
                    noPrintSelector:".no-print",//不想打印的元素的jQuery选择器，默认为".no-print"
                    iframe:true,//是否使用一个iframe来替代打印表单的弹出窗口，true为在本页面进行打印，false就是说新开一个页面打印，默认为true
                    append:null,//将内容添加到打印内容的后面
                    prepend:null,//将内容添加到打印内容的前面，可以用来作为要打印内容
                    deferred: $.Deferred()//回调函数
                });
            },


            //获取合同详情
            getPageInfo(){
                this.loading = true;
                let data = {};
                data.shipMonth = this.shipMonth;
                if(this.type == 'one'){
                    data.customerId = this.customerId;
                }else{
                    data.customerIds = this.customerIds;
                }
                customerDeliverList(data).then(res=>{
                    this.orderInfo = res;
                    this.loading = false;
                }).catch(()=>{
                    this.loading = false;
                })
            },
        }
    }
</script>

<style lang="scss">
    .detail-container {
        width: 90%;
        padding: 20px 20px 20px 20px;
        margin: 20px auto;
    }
    #print-div2{
        font-size:12px;
        font-family: "SimSun";
        .title{
            font-size:18px;
            font-weight: bold;
            text-align: center;
            line-height: 22px;
            padding-top:20px;
        }
        .paper-top{
            font-size:14px;
            margin-top:10px;
            .label{
            }
            .text{
                border-bottom:1px solid #000;
            }
            margin-bottom:10px;
        }
        .paper-title{
            font-size:14px;
            line-height: 20px;
            .title-no{
                padding-right:10px;
            }
            .tianXie{
                font-size:14px;
                text-decoration: underline;
            }
        }
        .good-table{
            table{
                border-left:2px solid #000;
                border-bottom:2px solid #000;
                th{
                    font-weight: normal;
                    font-size:14px;
                    border-top:2px solid #000;
                    padding:5px 10px;
                    line-height: 20px;
                    border-right:1px solid #000;
                }
                td{
                    font-weight: normal;
                    border-right:1px solid #000;
                    border-top:1px solid #000;
                    padding:5px 10px;
                    line-height: 20px;
                }
                .td-con{
                    word-break:break-all;
                    font-size:12px;
                }
            }
        }
        .paper-bottom{
            margin-top:20px;
            line-height: 20px;
            font-size:14px;
        }
    }
</style>
